import { Statistic, Card, Cascader, Descriptions } from 'antd';
import { useState } from 'react';
import { ArrowDownOutlined } from '@ant-design/icons';

const optionLists = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    isLeaf: false,
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    isLeaf: false,
  },
];

export default () => {
  const [options, setOptions] = useState(optionLists);

  const onChange = (value: any, selectedOptions: any) => {
    console.log(value, selectedOptions);
  };

  const loadData = (selectedOptions: string | any[]) => {
    const targetOption = selectedOptions[selectedOptions.length - 1];
    targetOption.loading = true;
    console.log(targetOption);
    // load options lazily
    setTimeout(() => {
      targetOption.loading = false;
      targetOption.children = [
        {
          label: `${targetOption.label} Dynamic 1`,
          value: 'dynamic1',
        },
        {
          label: `${targetOption.label} Dynamic 2`,
          value: 'dynamic2',
        },
      ];
      setOptions([...options]);
    }, 1000);
  };

  return (
    <Card title="历期查询">
      <Descriptions column={1}>
        <Descriptions.Item label="选择指标">
          <Cascader
            options={options}
            loadData={loadData}
            onChange={onChange}
            changeOnSelect
          />
        </Descriptions.Item>
        <Descriptions.Item label="查询结果">
          <Statistic
            title="Idle"
            value={9.3}
            precision={2}
            valueStyle={{ color: '#cf1322' }}
            prefix={<ArrowDownOutlined />}
            suffix="%"
          />
        </Descriptions.Item>
      </Descriptions>
    </Card>
  );
};
